<template>
    <div>
        <div class="banner">
            <div class="block text-center" m="t-4">
                <el-carousel trigger="click" height="150px">
                  <el-carousel-item v-for="item in bannerArr" :key="item">
                    <h3 class="small justify-center" text="6xl">{{ item }}</h3>
                  </el-carousel-item>
                </el-carousel>
              </div>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="订单日期" width="150" />
            <el-table-column label="客户信息">
              <el-table-column prop="name" label="下单昵称" width="120" />
              <el-table-column label="详细信息">
                <el-table-column prop="state" label="性别" width="120" />
                <el-table-column prop="city" label="等级" width="120" />
                <el-table-column prop="address" label="收货地址" />
                <el-table-column prop="zip" label="留言" width="120" />
              </el-table-column>
            </el-table-column>
          </el-table>
    </div>
</template>

<script lang="ts" setup>
const bannerArr = ['为客户服务','认真仔细','有耐心']
const tableData = [
  {
    date: '2023-04-19',
    name: '小树',
    state: '女',
    city: 'lv - 9',
    address: '比奇堡第二大道 No.657海螺房',
    zip: '我是小树',
  },
  {
    date: '2023-04-19',
    name: '小鸡',
    state: '女',
    city: 'lv - 4',
    address: '比奇堡第二大道 No.654小鸡窝',
    zip: '早点发哦~',
  },
  {
    date: '2023-04-19',
    name: '小波',
    state: '男',
    city: 'lv - 5',
    address: '比奇堡第四大道 No.067海草房',
    zip: '波老师来了',
  },
  {
    date: '2023-04-19',
    name: '地雷',
    state: '男',
    city: 'lv - 3',
    address: '比奇堡东南辅路 No.057地雷房',
    zip: '咋',
  },
  {
    date: '2023-04-19',
    name: '涵涵',
    state: '女',
    city: 'lv - 8',
    address: '比奇堡西南辅路 No.125汉堡房',
    zip: '弯了',
  },
  {
    date: '2023-04-19',
    name: '驹哥',
    state: '男',
    city: 'lv - 7',
    address: '比奇堡西南辅路 No.333小狗房',
    zip: '无',
  },
  {
    date: '2023-04-19',
    name: '干尸',
    state: '男',
    city: 'lv - 5',
    address: '比奇堡东三路 No.124海螺房',
    zip: '无',
  },
  {
    date: '2001-03-30',
    name: '库洛米',
    state: '女',
    city: 'lv - 0',
    address: '未知',
    zip: '-',
  },
]
</script>

<style scoped>
.block{
    margin-top: 10px;
}
.demonstration {
    color: var(--el-text-color-secondary);
  }
  
  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    text-align: center;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }

  .el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
  }
  .el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
  }
</style>